<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册  ${webInfo.name}</title>
<link rel="shortcut icon" href=${pageContext.request.contextPath}/static/favicon.ico type=image/x-icon>
<!--字体图标样式-->
<link href="${pageContext.request.contextPath}/static/default/javaex/pc/css/icomoon.css" rel="stylesheet" />
<!--动画样式-->
<link href="${pageContext.request.contextPath}/static/default/javaex/pc/css/animate.css" rel="stylesheet" />
<!--骨架样式-->
<link href="${pageContext.request.contextPath}/static/default/javaex/pc/css/common.css" rel="stylesheet" />
<!--皮肤（缇娜）-->
<link href="${pageContext.request.contextPath}/static/default/javaex/pc/css/skin/tina.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/static/default/javaex/pc/lib/jquery-1.7.2.min.js"></script>
<!--核心组件-->
<script src="${pageContext.request.contextPath}/static/default/javaex/pc/js/javaex.min.js"></script>
<link href="${pageContext.request.contextPath}/static/default/css/loginreg.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/static/default/js/cookie.js"></script>

	<link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
	<script src="${pageContext.request.contextPath}/webjars/jquery/3.1.1/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
	.login-step-con{
		height: 1000px;
	}
	.login-frame{
		height: 700px;
	}
	.login-frame-st .login-frame-top, .login-frame-st1 .login-frame-top{
		height: 600px;
	}
	.btn-login {
		margin-top: 60px;
	}
</style>
</head>
<body>
		<div class="register-title-con">
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header" style="margin-left: 100px">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">Brand</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li><a href="${webInfo.domain}"><font style="vertical-align: inherit;">首页</font></a></li>
							<li ><a href="${pageContext.request.contextPath}/page/portal/user/login_page.jsp">登陆</a></li>
							<li class="active"><a href="${pageContext.request.contextPath}/page/portal/user/register_page.jsp"
												  class="fr account-login"><font
									style="vertical-align: inherit;">注册</font></a></li>
							<li><a href="#">商品</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a href="#">这里没东西</a></li>
									<li><a href="#">你不要按我</a></li>
									<li><a href="#">真的没东西</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#">中国人不骗中国人</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#">为中华民族崛起而奋斗</a></li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Search">
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
		</div>

		<div class="login-step-con" >
			<div class="login-frame login-frame-st1 login-frame-stm login-frame-tw">
				<div id="register" class="login-frame-top" style="height: 100%">
					<form id="form">
						<div class="login-frame-ti">
							<h2 class="login-title" style=font-size:30px><b>用户注册</b></h2>
								<%--<p class="sub-title">注册过程需要验证邮箱，请注意</p>--%>
							<div class="info-container">
								<p class="errorInfo vh"><span>账号错误</span></p>
								<div class="tip-container tip-account-container">
									<p class="tip-info">请输入账号</p>
									<input type="text" class="txt-info txt-account" name="loginName" />
								</div>
							</div>
							<div class="info-container">
								<p class="errorInfo vh">
									<span>密码错误</span>
								</p>
								<div class="tip-container tip-pwd-container">
									<p class="tip-info">请输入密码</p>
									<input type="password" class="txt-info txt-password" name="passWord" />
								</div>
								<a href="javascript:;" class="eye-close"></a>
							</div>
							<div class="info-container">
								<p class="errorInfo vh">
									<span>密码错误</span>
								</p>
								<div class="tip-container tip-pwd-container">
									<p class="tip-info">再次输入密码</p>
									<input type="password" class="txt-info txt-password" name="passWord" />
								</div>
								<a href="javascript:;" class="eye-close"></a>
							</div>
							<div class="info-container">
								<p class="errorInfo vh"><span>邮箱错误</span></p>
								<div class="tip-container tip-account-container">
									<p class="tip-info">请输入邮箱</p>
									<input type="text" class="txt-info txt-account" name="email" />
								</div>
							</div>
							<div class="info-container">
								<p class="errorInfo vh"><span>手机错误</span></p>
								<div class="tip-container tip-account-container">
									<p class="tip-info">请输入手机</p>
									<input type="text" class="txt-info txt-account" name="tel" />
								</div>
							</div><br>
							<div class="form-group">
								<label for="confirmlogo" class="sr-only">验证码</label>
								<img src="/MyOnlineVdieo/portal/user/CheckCodeServlet" id="code" style="cursor: pointer;" alt="看不清楚,换一张" width="100px">
								<a href="#" id="changeImg">看不清？</a>
								<div  style="width: 160px" >
									<input type="text" class="form-control" id="confirmlogo" name="confirmlogo" placeholder="验证码">
								</div>
							</div>
							<div style="vertical-align: middle">
								<input type="checkbox" >已阅读并同意 <a>《用户协议》</a><a>《隐私政策》</a></input>
							</div>
							<a href="javascript:;" onclick="register()" class="btn-green btn-login">注册</a>
						</div>
					</form>
				</div>
				
<%--				<div id="validate" class="login-frame-top" style="display:none;">--%>
<%--					<div class="login-frame-ti">--%>
<%--						<h2 class="login-title">用户激活</h2>--%>
<%--						<p class="sub-title">验证码已发送至邮箱</p>--%>
<%--						<div class="info-container">--%>
<%--							<p class="errorInfo vh"><span>验证码错误</span></p>--%>
<%--							<div class="tip-container tip-account-container">--%>
<%--								<p class="tip-info">请输入验证码</p>--%>
<%--								<input type="text" id="identifying_code" class="txt-info txt-account" />--%>
<%--							</div>--%>
<%--						</div>--%>
<%--						<div class="forget-pwd fr">--%>
<%--							<a href="javascript:;" onclick="sendEmail()">没有收到，点击重新发送</a>--%>
<%--						</div>--%>
<%--						<a href="javascript:;" onclick="validate()" class="btn-green btn-login">激活</a>--%>
<%--					</div>--%>
<%--				</div>--%>
			</div>
		</div>
</body>
<script>
	$('input[type="text"], input[type="password"]').focus(function() {
		$(this).parent().parent().addClass("accountIn");
	});
	$('input[type="text"], input[type="password"]').blur(function() {
		if ($(this).val()=="") {
			$(this).parent().parent().removeClass("accountIn");
		}
	});

	//验证码
	$(function (){
		$('#changeImg').click(function (){
			//TODO改路径
			$('#code').attr("src","/MyOnlineVdieo/portal/user/CheckCodeServlet?"+new Date().getMilliseconds())
		})
	});

	// 点击注册
	function register() {
		$.ajax({
			url : "${pageContext.request.contextPath}/portal/user_info/register.json",
			type : "POST",
			dataType : "json",
			data : $("#form").serialize(),
			success : function(rtn) {
				if (rtn.code=="000000") {
					var info = rtn.data.info;
					
					delCookie("UID");
					delCookie("userToken");
					setCookie("UID", info.UID);
					setCookie("userToken", info.userToken);
					
					$("#register").hide();
					$("#validate").show();
					sendEmail();
					window.location.href = "${pageContext.request.contextPath}/portal/login_page.action";
				} else {
					javaex.optTip({
						content : rtn.message,
						type : "error"
					});
				}
			}
		});
	}



	<%--// 发送邮件--%>
	<%--function sendEmail() {--%>
	<%--	javaex.optTip({--%>
	<%--		content : "邮件发送中，请稍候...",--%>
	<%--		type : "submit"--%>
	<%--	});--%>
	<%--	--%>
	<%--	$.ajax({--%>
	<%--		url : "${pageContext.request.contextPath}/portal/user_info/register_email.json",--%>
	<%--		type : "POST",--%>
	<%--		dataType : "json",--%>
	<%--		data : {--%>
	<%--			"userToken" : getCookie("userToken")--%>
	<%--		},--%>
	<%--		success : function(rtn) {--%>
	<%--			if (rtn.code=="000000") {--%>
	<%--				javaex.optTip({--%>
	<%--					content : "邮件发送成功，请前往查收验证码",--%>
	<%--					type : "success"--%>
	<%--				});--%>
	<%--			} else {--%>
	<%--				javaex.optTip({--%>
	<%--					content : "邮件发送失败，请重试",--%>
	<%--					type : "error"--%>
	<%--				});--%>
	<%--			}--%>
	<%--		}--%>
	<%--	});--%>
	<%--}--%>
	
	// 点击激活账号
	function validate() {
		$.ajax({
			url : "${pageContext.request.contextPath}/portal/user_info/validate_email.json",
			type : "POST",
			dataType : "json",
			data : {
				"identifyingCode" : $("#identifying_code").val(),
				"userToken" : getCookie("userToken")
			},
			success : function(rtn) {
				if (rtn.code=="000000") {
					javaex.optTip({
						content : "注册成功，即将为您跳转到登录页",
						type : "success"
					});
					
					setTimeout(function() {
						window.location.href = "${pageContext.request.contextPath}/portal/login_page.action";
					}, 2000);
				} else {
					javaex.optTip({
						content : rtn.message,
						type : "error"
					});
				}
			}
		});
	}
</script>
</html>
